window.addEventListener("load", function () {
	// banner图区:点击激活tab样式
	// banner图区动态渲染文字
	let apiData = [
		{ times: 4000, price: 1200, unitPrice: "0.3000" },
		{ times: 8000, price: 2000, unitPrice: "0.2500" },
		{ times: 40000, price: 8000, unitPrice: "0.2000" },
	];
	apiData.forEach(function (v) {
		$(
			".bnright-btn"
		).innerHTML += `<div data-price=${v.price} data-unitprice=${v.unitPrice}>${v.times}次</div>`;
		// $(".bnright-btn").innerHTML += `<div>${v.times}次</div>`;
	});
	// 给默认的第一个添加激活样式
	// console.log($(".bnright-btn div "));
	$(".bnright-btn div ")[2].classList.add("active");
	// 显示第一个价格内容
	$(".daller").innerHTML = `<h2>$${$(".bnright-btn div ")[2].dataset.price}</h2>
	<span>(约${
		$(".bnright-btn div ")[2].dataset.unitprice
	}元/次),仅限企业实名购买</span>`;
	//添加激活效果
	$(".bnright-btn div").forEach(function (v) {
		console.log($(".bnright-btn div"));
		v.addEventListener("click", function () {
			if (!this.classList.contains("default")) {
				$(".bnright-btn div").forEach(function (item) {
					item.classList.remove("active");
				});
				// 再给自己增加激活类样式
				this.classList.add("active");

				//功能三:点击tab生成对应价格数据
				$(".daller").innerHTML = `<h2>$${this.dataset.price}</h2>
				<span>(约${this.dataset.unitprice}元/次),仅限企业实名购买</span>`;
			}
		});
	});

	// mian区的tab实现
	// 默认让第一个显示
	$(".main-nav li")[0].classList.add("active");
	// 默认显示第一部分的盒子
	$(".main-left>div")[0].classList.add("on");
	$(".main-nav li").forEach(function (v, i) {
		v.addEventListener("click", function () {
			$(".main-nav li").forEach(function (item, index) {
				item.classList.remove("active");
				$(".main-left>div")[index].classList.remove("on");
			});
			this.classList.add("active");
			$(".main-left>div")[i].classList.add("on");
			console.log($(".main-left>div"));
		});
	});

	//配置粒子图
	var config = {
		selector: "#bannerbg",
		vx: 4, //点x轴速度,正为右，负为左
		vy: 4, //点y轴速度
		height: 2, //点高宽，其实为正方形，所以不宜太大
		width: 2,
		count: 100, //点个数
		color: "100, 100, 100", //点颜色
		stroke: "150,150,150", //线条颜色
		dist: 6000, //点吸附距离
		e_dist: 20000, //鼠标吸附加速距离
		max_conn: 10, //点到点最大连接数
	};
	//调用
	CanvasParticle(config);
});
